<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.box {
				width: 200px;
				height: 200px;
				background-color: yellow;
				/* text-align: ; */
			}
		</style>
	</head>

	<body>
		<div class="box">我是文本</div>
		<script>
			// 要求：
			// 1.修改div颜色为红色，
			// 2.修改div宽度为300px
			// 3.修改div背景颜色为blue

			// 1. 获取元素
			const boxEle = document.querySelector(".box");

			//2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
			boxEle.style.width = "300px";

			// 多组单词的采取 小驼峰命名法 , 如修改背景颜色
			boxEle.style.backgroundColor = "blue";
		</script>
	</body>
</html>
